<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>path</title>
  </head>
  <body>
    <!-- 
    1. path (路径)
    1. d 是 path（路径）的基本属性
    2. d 定义了路径的直线和曲线元数据
      - M: 移动（从一个点移动到另一个点）
      - L: 线条（创建直线）
      - H: 水平线（创建直线）
      - V: 竖线（创建竖线）
      - C: 曲线（创建曲线）
      - S: 平滑曲线（创建平滑曲线）
      - Q: 二次贝塞尔曲线（创建二次贝塞尔曲线）
      - T: 平滑二次贝塞尔曲线（创建平滑二次贝塞尔曲线）
      
      - A: 椭圆弧（创建椭圆弧）
      - Z: 关闭路径（创建关闭路径）
      note: 这些都可以使用小写。小写是相对定位(相对前一个点的坐标)，大写是绝对定位
    -->
    <svg
      width="200"
      height="200"
      viewBox="0 0 200 200"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" style="fill: pink" />
      <path
        d="M100 10 L50 190 L150 190 Z"
        fill="red"
        stroke="black"
        stroke-width="2"
      />
    </svg>

    <!-- 二次贝塞尔曲线 -->
    <svg
      width="600"
      height="600"
      viewBox="0 0 600 600"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path
        id="lineAB"
        d="M100,350 l150,-300"
        fill="none"
        stroke="red"
        stroke-width="3"
      />
      <path
        id="lineBC"
        d="M250,50 l150,300"
        fill="none"
        stroke="red"
        stroke-width="3"
      />
      <path
        id="lineMid"
        d="M175,200 l150,0"
        fill="none"
        stroke="green"
        stroke-width="3"
      />
      <path
        id="Bézier"
        d="M100,350 q150,-300,300,0"
        fill="none"
        stroke="blue"
        stroke-width="3"
      />

      <!-- 顶点 -->
      <circle id="pointB" cx="250" cy="50" r="3" fill="black" />
      <circle id="pointA" cx="100" cy="350" r="3" fill="black" />
      <circle id="pointC" cx="400" cy="350" r="3" fill="black" />

      <!-- 点 -->
      <text id="textB" x="250" y="50" dx="-5" dy="-10" fill="green">B</text>
      <text id="textA" x="100" y="350" dx="-20" dy="10" fill="green">A</text>
      <text id="textC" x="400" y="350" dx="15" dy="10" fill="green">C</text>
    </svg>

    <!-- 三次贝塞尔曲线 -->
    <svg
      width="200"
      height="100"
      viewBox="0 0 200 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <!-- 绝对定位 -->
      <text x="50" y="16" dx="-2em" style="color: black">绝对定位</text>
      <path
        d="M10,90 C30,90 20,20 50,20 S70,90 90,90"
        fill="none"
        stroke="red"
        stroke-width="3"
      />
      <!-- 相对定位 -->
      <text x="150" y="16" dx="-2em" style="color: black">相对定位</text>
      <path
        d="M110,90 c20,0 10,-70 40,-70 s20,70 40,70"
        fill="none"
        stroke="red"
        stroke-width="3"
      />
    </svg>
  </body>
</html>
